CSS-PPropriedades do objeto de estilo

Parâmetros do Style de uma tag

A especificação do HTML5 foi criada propondo uma mudança radical na web. A primeira coisa foi organizar a colcha de retalhos feitas de muitos recursos externos ao browser. Ela tentou deixar tudo apenas para o browser fazer e com isto melhorar, e muito, a segurança do browser. Ela fechou o browser dentro de si ( não pode sequer sair da pasta onde a página foi obtida) e com isso revolucionou a segurança do servidor web.

Para implementar essa mudança viu que tinha adicionar funcionalidades como, por exemplo, remover o recurso flash player ( que sempre foi um risco a segurança) e colocar um recurso para exibir vídeo nativamente no browser.

Foi tão grande as mudanças que tiveram que fazer uma nova especificação de CSS ( CSS3 ) que incorporou muitas tags de formatação e posicionamento. Muitos recursos novos foram incorporados as velhas tags dando flexibilidade extra no seu uso.

O browser que antes era uma simples camada de apresentação agora, somando todos esses recursos, passou a ser um componente muito mais 'pesado', comilão de memória. Quantas vezes a gente ouve falar que basta abrir meia dúzia de abas do chrome que o computador 'cai de boca no chão', ou seja, fica lerdo, sem memória, consumindo muita HD...simplesmente trava. Como a gente diz...não tem nada grátis, tudo tem um custo.

As tags que eram bem simplorias passaram a ter recursos de exibição, formatação, posicionamento dentro dos seus estilos. Como a mudança foi grande nem sempre conhecemos sequer o básico para enfrentar alguns problemas. Sendo assim abaixo descrevo os principais parâmetros dos objetos de estilo. A intenção não é detalhar cada uma delas mas informar que elas existem e para que servem cada uma delas.

CategoriaPropriedade Descrição
AlignalignContent Define ou retorna o alinhamento entre as linhas dentro de um contêiner flexível quando os itens não ocupam todo o espaço disponível
alignItems Define ou retorna o alinhamento para itens dentro de um contêiner flexível
alignSelf Define ou retorna o alinhamento para itens selecionados dentro de um contêiner flexível
AnimationAnimation Uma propriedade abreviada para todas as propriedades de animação abaixo, exceto a propriedade animationPlayState
animationDelay Define ou retorna quando a animação vai começar
animationDirection Define ou retorna se a animação deve ou não ser reproduzida ao contrário em ciclos alternados
animationDuration Define ou retorna quantos segundos ou milissegundos uma animação leva para completar um ciclo
animationFillMode Define ou retorna quais valores são aplicados pela animação fora do tempo em que ela está sendo executada
animationIterationCount Define ou retorna o número de vezes que uma animação deve ser executada
animationName Define ou retorna um nome para a animação @keyframes
animationTimingFunction Define ou retorna a curva de velocidade da animação
animationPlayState Define ou retorna se a animação está rodando ou pausada
backgroundbackground Define ou retorna todas as propriedades do plano de fundo em uma declaração
backgroundAttachment Define ou retorna se uma imagem de fundo é fixa ou rola com a página
backgroundColor Define ou retorna a cor de fundo de um elemento
backgroundImage Define ou retorna a imagem de fundo para um elemento
backgroundPosition Define ou retorna a posição inicial de uma imagem de fundo
backgroundRepeat Define ou retorna como repetir (lado a lado) uma imagem de fundo
backgroundClip Define ou retorna a área de pintura do fundo
backgroundOrigin Define ou retorna a área de posicionamento das imagens de fundo
backgroundSize Define ou retorna o tamanho da imagem de fundo
backfaceVisibilitybackfaceVisibility Define ou retorna se um elemento deve ou não ficar visível quando não estiver voltado para a tela
borderborderDefine ou retorna borderWidth, borderStyle e borderColor em uma declaração
borderBottom Define ou retorna todas as propriedades borderBottom em uma declaração
borderBottomColor Define ou retorna a cor da borda inferior
borderBottomLeftRadius Define ou retorna a forma da borda do canto inferior esquerdo
borderBottomRightRadius Define ou retorna a forma da borda do canto inferior direito
borderBottomStyle Define ou retorna o estilo da borda inferior
borderBottomWidth Define ou retorna a largura da borda inferior
borderCollapse Define ou retorna se a borda da tabela deve ser recolhida em uma única borda ou não
borderColor Define ou retorna a cor da borda de um elemento (pode ter até quatro valores)
borderImage Uma propriedade abreviada para definir ou retornar todas as propriedades borderImage
borderImageOutset Define ou retorna a quantidade pela qual a área da imagem de borda se estende além da caixa de borda
borderImageRepeatDefine ou retorna se a borda da imagem deve ser repetida, arredondada ou esticada
borderImageSlice Define ou retorna os deslocamentos internos da borda da imagem
borderImageSource Define ou retorna a imagem a ser usada como borda
borderImageWidth Define ou retorna as larguras da borda da imagem
borderLeft Define ou retorna todas as propriedades borderLeft em uma declaração
borderLeftColor Define ou retorna a cor da borda esquerda
borderLeftStyle Define ou retorna o estilo da borda esquerda
borderLeftWidth Define ou retorna a largura da borda esquerda
borderRadius Uma propriedade abreviada para definir ou retornar todas as quatro propriedades borderRadius
borderRight Define ou retorna todas as propriedades borderRight em uma declaração
borderRightColor Define ou retorna a cor da borda direita
borderRightStyle Define ou retorna o estilo da borda direita
borderRightWidth Define ou retorna a largura da borda direita
borderSpacing Define ou retorna o espaço entre as células em uma tabela
borderStyle Define ou retorna o estilo da borda de um elemento (pode ter até quatro valores)
borderTop Define ou retorna todas as propriedades borderTop em uma declaração
borderTopColor Define ou retorna a cor da borda superior
borderTopLeftRadius Define ou retorna a forma da borda do canto superior esquerdo
borderTopRightRadius Define ou retorna a forma da borda do canto superior direito
borderTopStyle Define ou retorna o estilo da borda superior
borderTopWidth Define ou retorna a largura da borda superior
borderWidth Define ou retorna a largura da borda de um elemento (pode ter até quatro valores)
bottombottom Define ou retorna a posição inferior de um elemento posicionado
boxboxDecorationBreak Define ou retorna o comportamento do plano de fundo e da borda de um elemento na quebra de página ou, para elementos in-line, na quebra de linha.
boxShadow Anexa uma ou mais sombras projetadas à caixa
boxSizingPermite definir certos elementos para caber em uma área de uma certa maneira
captionSidecaptionSide Define ou retorna a posição da legenda da tabela
caretColorcaretColor Define ou retorna a cor do cursor/cursor de um el
clearclearDefine ou retorna a posição do elemento em relação aos objetos flutuantes
clipclipDefine ou retorna qual parte de um elemento posicionado é visível
colorcolor Define ou retorna a cor do texto
columncolumnCount Define ou retorna o número de colunas em que um elemento deve ser dividido
columnFill Define ou retorna como preencher as colunas
columnGap Define ou retorna o espaço entre as colunas
columnRule Uma propriedade abreviada para definir ou retornar todas as propriedades columnRule
columnRuleColor Define ou retorna a cor da regra entre as colunas
columnRuleStyle Define ou retorna o estilo da regra entre as colunas
columnRuleWidth Define ou retorna a largura da regra entre as colunas
columns Uma propriedade abreviada para definir ou retornar columnWidth e columnCount
columnSpan Define ou retorna quantas colunas um elemento deve abranger
columnWidth Define ou retorna a largura das colunas
contentcontentUsado com os pseudo-elementos :before e :after, para inserir o conteúdo gerado
countercounterIncrement Incrementa um ou mais contadores
counterResetcounterReset Cria ou redefine um ou mais contadores
cursorcursor Define ou retorna o tipo de cursor a ser exibido para o ponteiro do mouse
DirectionDirectionDefine ou retorna a direção do texto
DisplayDisplay Define ou retorna o tipo de exibição de um elemento
emptyCellsemptyCells Define ou retorna se mostra a borda e o fundo das células vazias ou não
filterfilter Define ou retorna filtros de imagem (efeitos visuais, como desfoque e saturação)
flexflexDefine ou retorna o comprimento do item, relativo ao restante
flexBasis Define ou retorna o comprimento inicial de um item flexível
flexDirection Define ou retorna a direção dos itens flexíveis
flexFlow Uma propriedade abreviada para as propriedades flexDirection e flexWrap
flexGrow Define ou retorna quanto o item crescerá em relação ao restante
flexShrink Define ou retorna como o item encolherá em relação ao restante
flexWrap Define ou retorna se os itens flexíveis devem ser encapsulados ou não
cssFloatcssFloat Define ou retorna o alinhamento horizontal de um elemento
fontfontDefine ou retorna fontStyle, fontVariant, fontWeight, fontSize, lineHeight e fontFamily em uma declaração
fontFamily Define ou retorna a família de fontes para o texto
fontSize Define ou retorna o tamanho da fonte do texto
fontStyle Define ou retorna se o estilo da fonte é normal, itálico ou oblíquo
fontVariant Define ou retorna se a fonte deve ser exibida em letras maiúsculas minúsculas
fontWeight Define ou retorna o negrito da fonte
fontSizeAdjustPreserva a legibilidade do texto quando ocorre fallback de fonte
fontStretch Seleciona uma face normal, condensada ou expandida de uma família de fontes
hangPunctuationhangPunctuation Especifica se um caractere de pontuação pode ser colocado fora da caixa de linha
heightheight Define ou retorna a altura de um elemento
hifenshifens Define como dividir palavras para melhorar o layout dos parágrafos
iconiconFornece ao autor a capacidade de estilizar um elemento com um equivalente icônico
imageOrientationimageOrientation Especifica uma rotação na direção direita ou no sentido horário que um agente de usuário aplica a uma imagem
isolationisolationDefine se um elemento deve criar um novo conteúdo de empilhamento
justifyContentDefine ou retorna o alinhamento entre os itens dentro de um contêiner flexível quando os itens não ocupam todo o espaço disponível.
leftleftDefine ou retorna a posição esquerda de um elemento posicionado
letterSpacingletterSpacing Define ou retorna o espaço entre os caracteres em um texto
lineHeightlineHeight Define ou retorna a distância entre linhas em um texto
listlistStyle Define ou retorna listStyleImage, listStylePosition e listStyleType em uma declaração
listStyleImage Define ou retorna uma imagem como marcador de item de lista
listStylePosition Define ou retorna a posição do marcador de item de lista
listStyleType Define ou retorna o tipo de marcador de item de lista
marginmarginDefine ou retorna as margens de um elemento (pode ter até quatro valores)
marginBottom Define ou retorna a margem inferior de um elemento
marginLeft Define ou retorna a margem esquerda de um elemento
marginRight Define ou retorna a margem direita de um elemento
marginTop Define ou retorna a margem superior de um elemento
WidthmaxWidth Define ou retorna a largura máxima de um elemento
minWidth Define ou retorna a largura mínima de um elemento
HeightminHeight Define ou retorna a altura mínima de um elemento
maxHeight Define ou retorna a altura máxima de um elemento
navnavDown Define ou retorna para onde navegar ao usar a tecla de navegação de seta para baixo
navIndex Define ou retorna a ordem de tabulação para um elemento
navLeft Define ou retorna para onde navegar ao usar a tecla de navegação de seta para a esquerda
navRight Define ou retorna para onde navegar ao usar a tecla de navegação de seta para a direita
navUp Define ou retorna para onde navegar ao usar a tecla de navegação de seta para cima
objectobjectFit Especifica como o conteúdo de um elemento substituído deve ser ajustado à caixa estabelecida por sua altura e largura usadas
objectPosition Especifica o alinhamento do elemento substituído dentro de sua caixa
opacityopacity Define ou retorna o nível de opacidade de um elemento
orderorder Define ou retorna a ordem do item flexível, em relação ao restante
orphans Define ou retorna o número mínimo de linhas para um elemento que deve ser deixado no final de uma página quando ocorre uma quebra de página dentro de um elemento
outoutlineDefine ou retorna todas as propriedades de contorno em uma declaração
outlineColor Define ou retorna a cor do contorno ao redor de um elemento
outlineOffset Desloca um contorno e o desenha além da borda da borda
outlineStyle Define ou retorna o estilo do contorno ao redor de um elemento
outlineWidth Define ou retorna a largura do contorno ao redor de um elemento
overoverflow Define ou retorna o que fazer com o conteúdo que renderiza fora da caixa do elemento
overflowX Especifica o que fazer com as bordas esquerda/direita do conteúdo, se estourar a área de conteúdo do elemento
overflowY Especifica o que fazer com as bordas superior/inferior do conteúdo, se estourar a área de conteúdo do elemento
paddingpadding Define ou retorna o preenchimento de um elemento (pode ter até quatro valores)
paddingBottom Define ou retorna o preenchimento inferior de um elemento
paddingLeft Define ou retorna o preenchimento esquerdo de um elemento
paddingRightDefine ou retorna o preenchimento correto de um elemento
paddingTop Define ou retorna o preenchimento superior de um elemento
pagepageBreakAfter Define ou retorna o comportamento de quebra de página após um elemento
pageBreakBefore Define ou retorna o comportamento de quebra de página antes de um elemento
pageBreakInside Define ou retorna o comportamento de quebra de página dentro de um elemento
perspective Define ou retorna a perspectiva de como os elementos 3D são visualizados
perspectiveOriginperspectiveOrigin Define ou retorna a posição inferior dos elementos 3D
positionposition Define ou retorna o tipo de método de posicionamento usado para um elemento (estático, relativo, absoluto ou fixo)
quotesquotesDefine ou retorna o tipo de aspas para aspas incorporadas
resizeresize Define ou retorna se um elemento é ou não redimensionável pelo usuário
rightright Define ou retorna a posição correta de um elemento posicionado
scrollscrollBehavior Especifica se deve animar suavemente a posição de rolagem, em vez de um salto direto, quando o usuário clica em um link dentro de uma caixa rolável.
tableLayouttableLayout Define ou retorna a maneira de dispor as células, linhas e colunas da tabela
tabSizetabSizeDefine ou retorna o comprimento do caractere de tabulação
texttextAlign Define ou retorna o alinhamento horizontal do texto
textAlignLast Define ou retorna como a última linha de um bloco ou uma linha logo antes de uma quebra de linha forçada é alinhada quando text-align é "justificado"
textDecoration Define ou retorna a decoração de um texto
textDecorationColor Define ou retorna a cor da decoração do texto
textDecorationLine Define ou retorna o tipo de linha em uma decoração de texto
textDecorationStyle Define ou retorna o estilo da linha em uma decoração de texto
textIndent Define ou retorna o recuo da primeira linha do texto
textJustify Define ou retorna o método de justificação usado quando text-align é "justify"
textOverflow Define ou retorna o que deve acontecer quando o texto transborda o elemento que o contém
textShadow Define ou retorna o efeito de sombra de um texto
textTransform Define ou retorna a capitalização de um texto
toptop Define ou retorna a posição superior de um elemento posicionado
transformtransform Aplica uma transformação 2D ou 3D a um elemento
transformOrigin Define ou retorna a posição dos elementos transformados
transformStyle Define ou retorna como os elementos aninhados são renderizados no espaço 3D
transitiontransition Uma propriedade abreviada para definir ou retornar as quatro propriedades de transição
transitiontransitionProperty Define ou retorna a propriedade CSS para a qual o efeito de transição é
transitionDuration Define ou retorna quantos segundos ou milissegundos um efeito de transição leva para ser concluído
transitionTimingFunction Define ou retorna a curva de velocidade do efeito de transição
transiçãoDelay Define ou retorna quando o efeito de transição começará
unicodeBidiunicodeBidi Define ou retorna se o texto deve ser substituído para suportar vários idiomas no mesmo documento
userSelectuserSelect Define ou retorna se o texto de um elemento pode ser selecionado ou não
verticalAlignverticalAlignDefine ou retorna o alinhamento vertical do conteúdo em um elemento
visibilityvisibilityDefine ou retorna se um elemento deve ser visível
whiteSpacewhiteSpace Define ou retorna como lidar com tabulações, quebras de linha e espaços em branco em um texto
width Define ou retorna a largura de um elemento
wordwordBreakDefine ou retorna regras de quebra de linha para scripts não CJK
wordSpacingDefine ou retorna o espaçamento entre palavras em um texto
wordWrap Permite que palavras longas e inquebráveis sejam quebradas e quebradas na próxima linha
widowswidowsDefine ou retorna o número mínimo de linhas para um elemento que deve estar visível no topo de uma página
zIndexzIndex Define ou retorna a ordem da pilha de um elemento posicionado

Tomei a liberdade de colocar em negrito as parâmetros / propriedades que você deve conhecer.